<template>
    <div>
<h3>房型列表</h3>
房间名称:<input type="text" v-model="queryInfo.RoomName"/>&nbsp;
房型面积:<input type="number" :min="0" v-model="queryInfo.MinArea"/>-<input type="number" :min="0" v-model="queryInfo.MaxArea"/>&nbsp;
<input type="button" class="btn btn-primary" value="查询" @click="ShowType"/>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>房型编号</td>
            <td>房间名称</td>
            <td>门市价</td>
            <td>押金</td>
            <td>房型面积</td>
            <td>可住人数</td>
            <td>可否加床</td>
            <td>房型图片</td>
            <td>房型介绍</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in Dream.list" :key="item.RoomId">
            <td>{{item.RoomId}}</td>
            <td>{{item.RoomName}}</td>
            <td>{{parseFloat(item.RoomPrice).toFixed(2)}}</td>
            <td>
                <span v-if="item.IsMoney==0">不需要</span>
                <span v-if="item.IsMoney==1">{{item.Money}}</span>
            </td>
            <td>{{parseFloat(item.RoomArea).toFixed(2)}}</td>
            <td>{{item.RoomLevel}}</td>
            <td>
                <span v-if="item.JiaChaung==1">不可加床</span>
                <span v-if="item.JiaChaung==2">免费加床</span>
                <span v-if="item.JiaChaung==3">收费加床</span>
                <span v-if="item.JiaChaung==4">自定义</span>
            </td>
            <td>
                <img :src="item.TypePhoto" width="150" height="100"/>
            </td>
            <td>{{item.RoomSay}}</td>
            <td></td>
        </tr>
    </tbody>
</table>
<span>总共有{{Dream.PageSum}}数据</span>
<span>总共有{{Dream.PageCount}}页</span>
<span>当前{{queryInfo.PageIndex}}/{{Dream.PageCount}}</span>
<input type="button" class="btn btn-primary" value="首页" @click="PageGo(1)"/>&nbsp;
<input type="button" class="btn btn-primary" value="上一页" @click="PageGo(queryInfo.PageIndex-1)"/>&nbsp;
<input type="button" class="btn btn-primary" value="下一页" @click="PageGo(queryInfo.PageIndex+1)"/>&nbsp;
<input type="button" class="btn btn-primary" value="尾页" @click="PageGo(Dream.PageCount)"/>&nbsp;
每页显示：<select v-model="queryInfo.PageSize" @change="PageGo(1)">
    <option v-for="Kill in T" :value="Kill" >每页显示{{Kill}}条</option>
</select>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';
const Router=useRouter();
const Route=useRoute();
onMounted(()=>{
    ShowType();
})
let Dream:any=reactive({
    list:[],
    PageSum:0,
    PageCount:0
})
let queryInfo=reactive({
    RoomName:'',
    MaxArea:0,
    MinArea:0,
    PageIndex:1,
    PageSize:2
})
const ShowType=()=>{
    axios({
    url:'/api/Type/TypeShowAll',
    method:'get',
    params:queryInfo
    })
    .then((res)=>{
        console.log(res.data);
        Dream.list=res.data.list;
        Dream.PageSum=res.data.PageSum;
        Dream.PageCount=res.data.PageCount;
    })
    .catch((err)=>{
        console.log(err)
    })
}
const PageGo=(W:any)=>{
    if(W<1){
        queryInfo.PageIndex=1;
        return;
    }
    if(W>Dream.PageCount){
        queryInfo.PageIndex=Dream.PageCount;
        return;
    }
    queryInfo.PageIndex=W;
    ShowType();
}
var T=ref([2,4,6]);
</script>

<style scoped>
span{
    margin-right: 10px;
}
</style>